// vars

/// COLORS

$color-text-primary: #303133;
$color-text-regular: #606266;
$color-text-secondary: #909399;
$color-text-placeholder: #c0c4cc;
$border-color-base: #dcdfe6;
$border-color-light: #e4e7ed;
$border-color-lighter: #ebeef5;
$border-color-extra-light: #f2f6fc;

// Background
$background-color-base: #f5f7fa;

$color-white: #ffffff;
$color-black: #000000;
$color-primary: #409eff;
$color-success: #67c23a;
$color-warning: #e6a23c;
$color-danger: #f56c6c;
$color-info: #909399;

// Border
$border-width-base: 1px;
$border-style-base: solid;
$border-color-hover: $color-text-placeholder;
$border-base: $border-width-base $border-style-base $border-color-base;
$border-radius-base: 4px;
$border-radius-small: 2px;
$border-radius-circle: 100%;

// Box-shadow
$box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

// Typography
$font-display: 'auto';
$font-size-extra-large: 20px;
$font-size-large: 18px;
$font-size-medium: 16px;
$font-size-base: 14px;
$font-size-small: 13px;
$font-size-extra-small: 12px;
$font-weight-primary: 500;
$font-line-height-primary: 24px;
$font-color-disabled-base: #bbb;

// Break-point
$sm: 768px;
$md: 992px;
$lg: 1200px;
$xl: 1920px;

$breakpoints: (
  'xs': '(max-width: #{$sm})',
  'sm': '(min-width: #{$sm})',
  'md': '(min-width: #{$md})',
  'lg': '(min-width: #{$lg})',
  'xl': '(min-width: #{$xl})'
);

$breakpoints-spec: (
  'xs-only': '(max-width: #{$sm})',
  'sm-and-up': '(min-width: #{$sm})',
  'sm-only': '(min-width: #{$sm}) and (max-width: #{$md})',
  'sm-and-down': '(max-width: #{$md})',
  'md-and-up': '(min-width: #{$md})',
  'md-only': '(min-width: #{$md}) and (max-width: #{$lg})',
  'md-and-down': '(max-width: #{$lg})',
  'lg-and-up': '(min-width: #{$lg})',
  'lg-only': '(min-width: #{$lg}) and (max-width: #{$xl})',
  'lg-and-down': '(max-width: #{$xl})',
  'xl-only': '(min-width: #{$xl})'
);

$menuText: #bfcbd9;
$menuActiveText: #409eff;
$subMenuActiveText: #f4f4f5;

$menuBg: #304156;
$menuHover: #263445;

$subMenuBg: #1f2d3d;
$subMenuHover: #001528;

$sideBarWidth: 210px;
